<template>
  <div>
    <el-form
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="87px"
      label-position="left"
    >
      <el-form-item label="上传" prop="file">
        <el-upload
          ref="file"
          :file-list="filefileList"
          :action="fileAction"
          :before-upload="fileBeforeUpload"
          list-type="picture-card"
          accept="image/*"
          :on-success="UploadSuccess"
        >
          <i class="el-icon-plus" />
        </el-upload>
      </el-form-item>

      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>
<script>
import { CreateImg } from '@/api/imagesapi'

export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        imageURL: [],
        imageCategroy: 1,
        imageSId: 0
      },
      rules: {},
      fileAction: 'https://localhost:44341/api/app/special/upload',
      filefileList: []
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
        console.log(this.formData)
        CreateImg(this.formData)
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    fileBeforeUpload(file) {
      const isRightSize = file.size / 1024 / 1024 < 10
      if (!isRightSize) {
        this.$message.error('文件大小超过 10MB')
      }
      return isRightSize
    },
    UploadSuccess(x, y) {
      this.formData.imageURL.push(x)
    }
  }
}

</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}

</style>
